<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>IndexedDB library Demo</title>
        <style>
            #list table {
                width: 1000px;
            }

            #list table td{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="ctrl">
            <div>
                书名: <input type="text" id="input-bookname" >
                类型: <select id="input-booktype"> <option value="故事书">故事书</option> <option value="科学书">科学书</option> <option value="美术书">美术书</option> <option value="教科书">教科书</option> </select>
                <button id="btn-addbook">添加图书</button>
                <button id="btn-clearstore">清除图书库</button>
                <button id="btn-adds">批量添加图书</button>
            </div>
            <div>
                过滤：
                <label><input type="radio" name="filter" class="input-filter" value="all" checked> 全部</label>
                <label><input type="radio" name="filter" class="input-filter" value="故事书"> 故事书</label>
                <label><input type="radio" name="filter" class="input-filter" value="科学书"> 科学书</label>
                <label><input type="radio" name="filter" class="input-filter" value="美术书"> 美术书</label>
                <label><input type="radio" name="filter" class="input-filter" value="教科书"> 教科书</label>
            </div>
        </div>

        <div id="list">
            <table>
                <thead>
                    <tr>
                        <td>主键</td>
                        <td>数据</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody id="list-body">
                    
                </tbody>
            </table>
        </div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>
